<template>
  <div class="content">
    <div>
      <div class="topNav" style="z-index:99">
        <img class="bg" src="./assets/topbg.png" alt="" srcset="">
        <div style="float:right" class="time">
          <div style="float:left">当前时间为：</div>
          {{time}}
        </div>
        <div class="title1">
          <span class="logo_name"><b>综合态势感知系统</b></span>
        </div>
      </div>
      <!-- select -->
      <div class="sel">
        <div class="sel_left">
          <el-select  style="width:170px;height:30px" clearable @change="changeSel"  v-model="value1" placeholder="目标态势">
            <el-option   v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select style="width:170px;height:30px" clearable v-model="value2" placeholder="综合态势">
            <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="sel_right">
          <el-select  style="width:170px;height:30px" clearable v-model="value3" placeholder="数据分析">
            <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select  style="width:170px;height:30px" clearable v-model="value4" placeholder="三维模型">
            <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <ImageAnalysis v-show="showImageAnalysis" @close="changeShowImageAnalysis"></ImageAnalysis>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import * as Cesium from 'cesium';
import { Rectangle } from "cesium";
import ImageAnalysis from "./components/ImageAnalysis.vue"

let showImageAnalysis = ref(false);
let value1 = ref('');
let value2 = ref('');
let value3 = ref('');
let value4 = ref('');
let time = ref('');

const getNowTime = () => {
  let dateTime
  let yy = new Date().getFullYear()
  let mm = new Date().getMonth() + 1
  let dd = new Date().getDate()
  let hh = new Date().getHours()
  let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
    : new Date().getMinutes()
  let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
    : new Date().getSeconds()
  dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
  console.log(dateTime)

  time.value = dateTime
  // return dateTime
}

let options1 = [{
  label: '图像定位',
  value: '1'
}, {
  label: '目标定位',
  value: '2'
}, {
  label: '学校视角',
  value: '3'
}, {
  label: '态势感知',
  value: '4'
}]

let options = [{
  value: '选项1',
  label: '选项1'
}, {
  value: '选项2',
  label: '选项2'
}, {
  value: '选项3',
  label: '选项3'
}, {
  value: '选项4',
  label: '选项4'
}]

const changeSel = (e) => {

  console.log(e,7777777777);
  if (e == 1) {
    showImageAnalysis.value = true
  }
}

let timer =null;

onUnmounted(()=>{
clearInterval(timer)
})


onMounted(() => {

  timer = setInterval(() => {
    getNowTime()
  }, 1000);
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxN2U4NDdlNC0wN2NjLTRmM2ItODM5Mi1jYzk2MWI0NTYwOTYiLCJpZCI6MTI4NDUxLCJpYXQiOjE2Nzg2OTIwNzN9.wXcL8r5Mdcvos6doajnMzUp_UGluBCNFT7bqJHWNCzI';
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(80, 22, 130, 55)// 默认定位到中国上空，home定位到中国范围
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,
    infoBox: true,
    timeline:false,
    baseLayerPicker: true,
    orderIndependentTranslucency: true,
    dataSources: new Cesium.DataSourceCollection(), //需要进行可视化的数据源的集合
    projectionPicker: undefined, //ProjectionPicker 是用于在透视和正交投影之间切换的单按钮小部件。
    terrainProvider: new Cesium.EllipsoidTerrainProvider(), //地形图层提供者，仅baseLayerPicker设为false有意义

  });
  //viewer.scene.globe.enableLighting = true 设置光照
  viewer.cesiumWidget.creditContainer.style.display = 'none';
  viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=92524587ae592649181493050884dc01",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true}));
})

const changeShowImageAnalysis = () => {
  console.log('222')
  showImageAnalysis.value = false
}
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: black;
}

* {
  margin: 0;
  padding: 0;
}

.time {
  position: absolute;
  left: 5%;
  top: 0;
  color: #fff;
  font-size: 18px;
  font-family: "Times New Roman";
  line-height: 30px;
}

.topNav {
  width: 100%;
  min-height: 50px;
  position: relative;
}

.bg {
  width: 100%;
  max-height: 68px;
  display: block;
}

.title1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sel {
  display: flex;
  align-items: center;
  margin: -20px 12% 3px;
}

.sel>div {
  flex: 1;
  display: flex;
}

.el-input__inner {
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.el-input__wrapper {
  background: rgba(13, 27, 49, 0.79);
  margin-left: 20px;

  /* box-shadow:none; */
}

.el-select-dropdown__item{
  text-align: center;
}

.sel_left {
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.sel_right {
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.el-select {
  width: 200px;
  margin-right: 15px;
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;

}

#cesiumContainer {
  /* margin-top: 68px; */
  flex: 1;
  width: 100%;
  /* height: 93%; */
  overflow: hidden;
  z-index: 100;
}

.logo_name {
  font-family: Kaiti, serif;
  font-size: 30px;
  line-height: 24px;
  color: White;
}

.select {
  display: flex;
  align-items: center;
}

</style>



